<html xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head th:include="layout :: htmlhead" th:with="title='favorites'"></head>
<link rel="stylesheet" th:href="@{/vendor/fontawesome/css/font-awesome.min.css}"/>
<link rel="stylesheet" th:href="@{/vendor/simple-line-icons/css/simple-line-icons.css}">
<link rel="stylesheet" th:href="@{/media/css/bootstrap.css}" id="bscss">
<link rel="stylesheet" th:href="@{/media/css/app.css}" id="maincss"/>
<link rel="stylesheet" th:href="@{/media/css/theme-i.css}" id="maincss">
<body>
<section>
  <div class="container-fluid">
    <div class="row" id="exchangePage">
      <div class="col-md-12">
        <form id="newExchangeForm" data-parsley-validate="true" onsubmit="return false">
          <div class="row">
            <div class="panel panel-default col-md-6">
              <div class="panel-heading">
                <h3 class="panel-title ng-scope">交易所选择</h3>
              </div>
              <div class="panel-body">
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="type">交易类型</label>
                    <select id="type" class="form-control ng-valid ng-not-empty ng-touched ng-dirty ng-valid-parse">
                      <option value=""> -- 请选择 -- </option>
                      <option value="DIGICCY">数字货币</option>
                      <option value="DIGICCY1">数字货币1</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exchangeName">交易所</label>
                    <select id="exchangeName"
                            class="form-control ng-valid ng-not-empty ng-touched ng-dirty ng-valid-parse">
                      <option value=""> -- 请选择 -- </option>
                      <option value="HUOBI">火币</option>
                      <option value="BINANCE">币安</option>
                    </select>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="panel panel-default col-md-6">
              <div class="panel-heading">
                <h3 class="panel-title ng-scope">配置参数</h3>
              </div>
              <div class="panel-body">
                <form id="addForm">
                  <div class="form-group">
                    <label for="accessKey">
                      Access Key
                    </label>
                    <input type="text" class="form-control" id="accessKey"/>
                  </div>
                  <div class="form-group">
                    <label for="secretKey">
                      Secret Key
                    </label>
                    <input type="password" class="form-control" id="secretKey"/>
                  </div>
                </form>
                <div class="col-md-12">
                  <button type="submit" id="addExchange" class="btn btn-block btn-primary mt-lg">
                    添加交易所
                  </button>
                </div>
              </div>
            </div>
          </div>
        </form>
        <div class="panel panel-default" th:if="*{exchangeList.size() > 0}">
          <div class="panel-heading">
            <h3 class="panel-title ng-scope">现存交易所信息</h3>
          </div>
          <div class="panel-body">
            <div class="col-md-3"
                 th:each="exchange : ${exchangeList}">
              <div class="panel panel-default">
                <form id="deleteForm">
                  <div class="panel-heading">
                    <h3 id="existedType" class="panel-title ng-scope" th:name="${exchange.getType()}"
                        th:text="${exchange.getType()}"></h3>
                  </div>
                  <div class="panel-body">
                    <label for="existedExchange">交易所</label><input id="existedExchange" type="text"
                                                                   class="form-control"
                                                                   th:name="*{exchange.getExchange()}"
                                                                   th:value="*{exchange.getExchange()}"
                                                                   readonly="readonly"/>
                    <label for="existedAccessKey">Access Key</label><input id="existedAccessKey" type="text"
                                                                           class="form-control"
                                                                           th:name="*{exchange.getAccessKey()}"
                                                                           th:value="*{exchange.getAccessKey()}"/>
                    <label for="existedSecretKey">Secret Key</label><input id="existedSecretKey" type="password"
                                                                           class="form-control"
                                                                           th:name="*{exchange.getSecretKey()}"
                                                                           th:value="*{exchange.getSecretKey()}"/>
                    <button type="submit" id="deleteExchange" class="btn btn-block mt-lg btn btn-sm btn-danger">
                      删除
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

</body>
<script th:src="@{/webjars/vue/2.6.11/vue.min.js}"></script>
<script th:src="@{/webjars/vue-resource/0.7.0/dist/vue-resource.min.js}"></script>
<script th:src="@{/vendor/parsleyjs/dist/parsley.min.js}"></script>
<script type='text/javascript' th:inline="javascript">

  $(function () {
    toastr.options = {
      'closeButton': true,
      'positionClass': 'toast-top-center',
      'timeOut': '5000',
    };
    $("#addExchange").click(function () {
      var ok = $('#newExchangeForm').parsley().isValid({force: true});
      var data = {
        'type': $("#type").val(),
        'exchange': $("#exchangeName").val(),
        'accessKey': $("#accessKey").val(),
        'secretKey': $("#secretKey").val(),
      };

      if (ok) {
        $.ajax({
          async: false,
          type: 'POST',
          dataType: 'json',
          data: JSON.stringify(data),
          contentType: 'application/json',
          url: '/exchange/add',
          error: function (XMLHttpRequest, textStatus, errorThrown) {
            console.log(XMLHttpRequest);
            console.log(textStatus);
            console.log(errorThrown);
          },
          success: function (response) {
            if (response.rspCode === '000000') {
              locationUrl('/standard/exchange', '');
              toastr.success('交易所信息添加成功!', '操作成功');
            } else {
              toastr.error(response.rspMsg, '操作失败');
            }
          }
        });
      }
    });

    // $("#deleteExchange").click(function () {
    //   var ok = $('#deleteForm').parsley().isValid({force: true});
    //   var data = {
    //     'type': $("#existedType").text(),
    //     'exchange': $("#existedExchange").val(),
    //     'accessKey': $("#existedAccessKey").val(),
    //     'secretKey': $("#existedSecretKey").val(),
    //   };
    //
    //   if (ok) {
    //     $.ajax({
    //       async: false,
    //       type: 'POST',
    //       dataType: 'json',
    //       data: JSON.stringify(data),
    //       contentType: 'application/json',
    //       url: '/exchange/delete',
    //       error: function (XMLHttpRequest, textStatus, errorThrown) {
    //         console.log(XMLHttpRequest);
    //         console.log(textStatus);
    //         console.log(errorThrown);
    //       },
    //       success: function (response) {
    //         if (response.rspCode === '000000') {
    //           locationUrl('/standard/exchange', '');
    //           toastr.success('交易所信息删除成功!', '操作成功');
    //         } else {
    //           toastr.error(response.rspMsg, '操作失败');
    //         }
    //       }
    //     });
    //   }
    // });
  });
</script>
</html>

